<template>
  <d2-container>
  <div class="app-container">
    <el-container :style="'height:'+containerHeight+'px'">
      <el-main class="theme-front-color el-aside">
        <div class="search">
            <el-form label-position="right" :model="dataForm" :inline="true">
                <!--<el-form-item class="el-form-item&#45;&#45;mini">-->
                  <!--<el-input placeholder="请选择区域信息"-->
                    <!--style="width: 250px;"-->
                    <!--class="filter-item"-->
                    <!--size="mini"-->
                    <!--:suffix-icon="showTree?'el-icon-arrow-up':'el-icon-arrow-down'"-->
                    <!--@click.native="deptogglePanel($event)"-->
                    <!--v-model="currentbuildInfo.buildingName">-->
                    <!--<template slot="prepend">区域选择</template>-->
                  <!--</el-input>-->
                  <!--<div v-show="showTree" class="objectTree w-160" ref="suoShuMenTree">-->
                    <!--<el-tree-->
                      <!--:style="'height:'+containerHeight+'px'"-->
                      <!--ref="buildTree"-->
                      <!--highlight-current-->
                      <!--node-key="buildingId"-->
                      <!--show-checkbox-->
                      <!--:data="dataList"-->
                      <!--:check-on-click-node="true"-->
                      <!--:check-strictly="true"-->
                      <!--:expand-on-click-node="false"-->
                      <!--:props="menuListTreeProps"-->
                      <!--@check-change="selectBuild"-->
                      <!--default-expand-all-->
                    <!--&gt;</el-tree>-->
                  <!--</div>-->
                <!--</el-form-item>-->
                <el-form-item class="el-form-item--mini">
                  <el-radio-group v-model="dataForm.dateType" size="mini">
                    <el-radio-button :label="item.date" v-for="(item, index) in Config.searchDate" :key="index">
                      {{item.label}}
                    </el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="日期" label-width="40px" class="el-form-item--mini">
                  <el-date-picker
                    v-model="dataForm.date"
                    placeholder="时间范围"
                    style="width: 200px;"
                    class="filter-item"
                    size="mini"
                    :picker-options="pickerOptions"
                    :type="dataForm.dateType"
                    suffix-icon="el-icon-date"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    clearable
                    @keyup.enter.native="getPowerDataList"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item class="el-form-item--mini">
                  <el-select v-model="dataForm.energyType"  style="width: 100px;" placeholder="请选择"  size="mini">
                    <el-option
                      v-for="(item, index) in meterTypeList" :key="index"
                      :label="item.paramValue"
                      :value="item.paramKey">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="el-form-item--mini">
                  <el-button
                    class="filter-item"
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="getPowerDataList"
                  >查询</el-button>
                  <el-button
                      class="filter-item"
                      type="primary"
                      icon="el-icon-download"
                      size="mini"
                      @click="exoprtData"
                  >导出</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="margin-top:20px;">
          <el-table
            :data="meterdataList"
            :show-summary="true"
            border
            :height="bottomChartHeight"
            v-loading="dataListLoading"
            style="width: 100%;overflow:visible;"
          >
            <el-table-column prop="id" header-align="center" width="70px" align="center" label="序号"></el-table-column>
            <el-table-column
              prop="buildingName"
              header-align="center"
              align="center"
              label="区域名称"
            ></el-table-column>
            <el-table-column
              prop="energyTypeName"
              header-align="center"
              align="center"
              label="分类"
            ></el-table-column>
            <!-- <el-table-column
              prop="subEnergyTypeName"
              header-align="center"
              align="center"
              label="分项"
            ></el-table-column> -->
            <el-table-column
              prop="val"
              header-align="center"
              align="center"
              :label="'本期('+currentUnit+')'"
            >
              <template slot-scope="scope">{{scope.row.val}}</template>
            </el-table-column>
            <!-- <el-table-column
              prop="tqVal"
              header-align="center"
              align="center"
              :label="'同期('+currentUnit+')'"
            >
              <template slot-scope="scope">{{scope.row.tqVal}}</template>
            </el-table-column>
            <el-table-column
              prop="hqVal"
              header-align="center"
              align="center"
              :label="'环期('+currentUnit+')'"
            >
              <template slot-scope="scope">{{scope.row.hqVal}}</template>
            </el-table-column>
            <el-table-column
              prop="tb"
              header-align="center"
              align="center"
              label="同比(%)"
            >
              <template slot-scope="scope">{{scope.row.tb}}</template>
            </el-table-column>
            <el-table-column
              prop="hb"
              header-align="center"
              align="center"
              label="环比(%)"
            >
              <template
                slot-scope="scope"
              >{{scope.row.hb}}</template>
            </el-table-column> -->
            <el-table-column
              prop="date"
              header-align="center"
              align="center"
              label="日期"
            >
              <template slot-scope="scope">{{scope.row.date}}</template>
            </el-table-column>
          </el-table>

        </div>
      </el-main>
      <el-aside class="tree-area">
        <el-tabs v-model="activeName">
          <el-tab-pane label="区域" name="2">
            <el-tree
              style="margin-top: 10px"
              ref="buildTree"
              :show-checkbox="true"
              highlight-current
              node-key="buildingId"
              :check-on-click-node="true"
              :check-strictly="false"
              :data="dataList"
              :expand-on-click-node="false"
              :props="menuListTreeProps"
              @check="selectBuild"
              default-expand-all
            ></el-tree>
          </el-tab-pane>
        </el-tabs>

      </el-aside>
    </el-container>
  </div>
  </d2-container>
</template>

<script>
import * as Util from "@/utils";
import Config from "@/utils/config"
import * as Echarts from 'echarts'
import Minix from '../power/mixin'
export default {
  name: "type",
  mixins:[Minix],
  data() {
    return {
      activeName:'2',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      Config:Config,
      showTree:false,
      dataForm: {
        date:'',
        dateType:'',
        energyType:'',
        subEnergyType:'',//分项选择值
      },
      page: {
        page: 1,
        total: 0,
        size: 10
      },
      menuListTreeProps: {
        label: "buildingName",
        children: "children"
      },
      dataList: [],
      showInfo: false,
      currentbuildInfo: {
        buildingName:'',
      },
      powerList:[],

      meterTypeList:[],
      meterTypeParamValueList:[],//分项选择列表值
      meterdataList:[],

      currentUnit:'',
      dataListLoading:false,
    };
  },
  computed: {
    containerHeight() {
      return Util.getClientHeight() - 163;
    },
    bottomChartHeight(){
      return Util.getClientHeight() - 298;
    }
  },
  created() {
    this.dataForm.dateType=Config.searchDate[0].date;
    this.$nextTick(()=>{
      this.queryStatic("METER_TYPE",null,data=>{
        if (data && data.code === 0) {
          this.meterTypeList = data.page
          this.dataForm.energyType = data.page[0].paramKey;
          this.currentUnit = data.page[0].paramExt;
          this.getDataList();
        } else {
          this.meterTypeList = []
        }
      });
    })
  },
  methods: {
    /**
     * 获取参数枚举
     */
    queryStatic(type,paramValue,callback) {
      let params = {
        'code': type ,
        "customerId":this.$util.cookies.get('customer_id')
      }
      if(paramValue){
        Object.assign(params,{paramValue,paramValue});
      }
      this.$api.okhttp({
        url: this.$http.adornUrl('/sys/sysstaticdata/getList'),
        method: 'get',
        params: this.$http.adornParams(params)
      }).then((data) => {
        if(callback){
          callback(data);
        }
      });
    },
    deptogglePanel (event) {
      event || (event = window.event)
      event.stopPropagation
        ? event.stopPropagation()
        : (event.cancelBubble = true)
      this.showTree ? this.dephide() : this.depshow()
    },
    depshow () {
      this.showTree = true
      document.addEventListener('click', this.dephidePanel, false)
    },
    dephide () {
      this.showTree = false
      document.addEventListener('click', this.dephidePanel, false)
    },
    dephidePanel (e) {
      if (
        this.$refs.suoShuMenTree &&
        !this.$refs.suoShuMenTree.contains(e.target)
      ) {
        this.dephide()
      }
    },

    selectBuild (data, checked, indeterminate) {
      if(checked){
        this.$refs.buildTree.setCheckedNodes([]);
        this.currentbuildInfo = data;
        //查询设备列表
        this.$refs.buildTree.setChecked(data.buildingId,checked);
        this.showTree = false
      }
    },
    // 获取数据列表
    getDataList() {
      this.$api.okhttp({
        url: this.$http.adornUrl("/ecs/ecsbuildinginfo/select"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page.pageIndex,
          limit: this.page.pageSize,
          key: this.dataForm.key,
          customerId: this.$util.cookies.get("customer_id"),
          projectid:this.$util.cookies.get("cuuren_projectId")
        })
      }).then((data) => {
        if (data && data.code === 0) {
          if(data.menuList.length>0){
            this.currentbuildInfo = data.menuList[0];
          }
          this.dataList = Util.treeDataTranslate(
            data.menuList,
            "buildingId",
            "parentBuildingId"
          );
          this.getPowerDataList();
        } else {
          this.dataList = [];
        }
      });
    },
    changeShowType(){
      this.showchart = !this.showchart;
    },
    dealDataList(data){
      this.meterdataList = [];
      let idx = 0;
      data.forEach((ele,index)=>{
        //表格数据
        idx++;
        let tb = 0,hb=0;
        if(ele.tqVal>0){
          tb = ((ele.val-ele.tqVal)/ele.tqVal*100).toFixed(0);
        }
        if(ele.hqVal>0){
          hb = ((ele.val-ele.hqVal)/ele.hqVal*100).toFixed(0);
        }
        this.meterdataList.push({
          id:idx,
          buildingName:this.currentbuildInfo.buildingName,
          energyTypeName:this.meterTypeList.find(item=>{return item.paramKey==this.dataForm.energyType}).paramValue,
          //subEnergyTypeName:ele.itemName,
          val:ele.val,
          tqVal:ele.tqVal,
          hqVal:ele.hqVal,
          tb:tb,
          hb:hb,
          date:(this.dataForm.date&&this.dataForm.date!="")?this.dataForm.dateType=='date'?Util.dateFormat(Config.searchDate.find(ele=>ele.date==this.dataForm.dateType).formatStr,this.dataForm.date)+' '+ele.dateDetail+'H':Util.dateFormat(Config.searchDate.find(e=>e.date==this.dataForm.dateType).formatStr,this.dataForm.date)+'-'+ele.dateDetail:'',
        })
      })
    },
    /**
     * 查询数据
     * */
    getPowerDataList() {
      this.$api.okhttp({
        //url: this.$http.adornUrl("/ecm/subitem/list"),
        url:this.$http.adornUrl('/ecm/area/list'),
        method: "post",
        data: this.$http.adornParams(
          {
            pbuildingId: this.currentbuildInfo.buildingId,
            date: (this.dataForm.date&&this.dataForm.date!="")?this.formarDate(this.dataForm.dateType,new Date(this.dataForm.date)):'',
            dateType: Config.searchDate.find(item=>item.date==this.dataForm.dateType).typeDesc,
            meterType: this.dataForm.energyType,
            customerId: this.$util.cookies.get("customer_id"),
            //projectid:this.$util.cookies.get("cuuren_projectId")
          }
        )
      }).then((data) => {
        if (data && data.code === 0) {
         // console.log(data.data);
          this.powerList = data.data;
          this.dealDataList(data.data.values);
        }
      })
    },
    exoprtData(){
      // 导出数据
      //let header=['序号','区域名称','分类','分项','本期用能('+this.currentUnit+')','同期用能('+this.currentUnit+')','环期用能('+this.currentUnit+')','同比比率(%)','环比比率(%)','时间'];
      let header=['序号','区域名称','分类','本期用能('+this.currentUnit+')','日期']
      //let props=['id','buildingName','energyTypeName','subEnergyTypeName','val','tqVal','hqVal','tb','hb','date']
      let props=['id','buildingName','energyTypeName','val','date']
      let fileName=`区域能耗(${ this.meterTypeList.find(item=>item.paramKey==this.dataForm.energyType).paramValue})统计`
      this.export2Excel(header,props,fileName,this.meterdataList);
    },

  },
  watch:{
    'dataForm.energyType':function (newValue,oldValue){
      // console.log(this.meterTypeList);
      // console.log(this.dataForm.energyType);
      // console.log(this.meterTypeList.find(item=>{return item.paramKey==this.dataForm.energyType}));
      this.currentUnit = this.meterTypeList.find(item=>{return item.paramKey==this.dataForm.energyType}).paramExt;
      this.getPowerDataList();
    },

  }
};
</script>

<style scoped>
  .tree-area { background-color: rgba(0, 0, 0, 0.1);
    width: 250px !important;
    /* box-shadow: 0px 0px 2px 2px #f7f6f6; */
    /* border: solid 1px #808080; */
    padding-top: 10px;
    padding-left: 15px;
  }
.range-search{
  padding: 10px 0px;
  border-bottom: 1px solid #808080;
  border-top: 1px solid #808080;
  margin:0px 25px;
  margin-bottom: 10px;
}
.type-card{
  height: 70px;
  text-align:center;
  line-height: 30px;
}
.type-card .num{
  font-size:1.2rem;;
}
  .search{
    padding: 20px 0px 5px 0px;
    border: 1px solid #808080;
    border-left: none;
    border-right: none;
  }
  .el-form-item--medium .el-form-item__content, .el-form-item--medium .el-form-item__label{
    line-height: 27px;;
  }
  .device {
    display: inline-block;
    padding: 0 10px;
    line-height: 30px;
    width: 100%;
    color: #8a8c8e;
    /* border: 1px solid #d9ecff; */
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .actived {
    /* background-color: #65acd0; */
    /* color: #f7f6f6; */
    color: #4c4b4b;
  }
  .show-device {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 30px;
    cursor: pointer;
    padding-right: 20px;
  }
  .bg-white {
    box-shadow: 0px 0px 2px 2px #f7f6f6;
    height: 100%;
  }
  .el-tree-node__content {
    height: 30px !important;
  }
  .busi-chart{
      width: 100%;
      height: 30%;
      margin-top: 10x;
  }
  .objectTree {
      margin-left: 89px;
      position: absolute;
      overflow: auto;
      z-index: 100;
      height: 200px;
      /* border: 1px solid #ddd; */
      line-height: normal;
      z-index: 204;
      box-shadow: 0px 0px 1px 1px #e2dfdf;
      margin-top: 3px;
      border-radius: 4px;
    background-color: white;
  }
  .w-160{
    width: 160px
  }
</style>
